<template>
    <el-form :model="basic_teaching_work" label-position="top" size="large" :rules="rules" ref="basic_teaching_work_form">
        <el-tabs v-model="ActiveTab">
            <el-scrollbar style="height: calc(100vh - 165px)">


                <el-tab-pane label="教学任务" name="教学任务">
                    <el-row justify="center" style="margin-top: 50px">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between" v-for="(item, index) of basic_teaching_work.b_teachingwork_list">
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="学期" :prop="`b_teachingwork_list.${index}.tw_semester`" :rules="{required: true, message: '请选择-教学任务-学期', trigger: 'blur'}">
                                                <el-select v-model="item.tw_semester">
                                                    <el-option v-for="option in semester_group" :key="option.value" :label="option.label" :value="option.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="课程" :prop="`b_teachingwork_list.${index}.tw_course`" :rules="{required: true, message: '请输入-教学任务-课程', trigger: 'blur'}">
                                                <el-input v-model="item.tw_course"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="班级" :prop="`b_teachingwork_list.${index}.tw_class`" :rules="{required: true, message: '请输入-教学任务-班级', trigger: 'blur'}">
                                                <el-input v-model="item.tw_class"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="班级人数" :prop="`b_teachingwork_list.${index}.tw_number`" :rules="{required: true, message: '请输入-教学任务-人数', trigger: 'blur'}">
                                                <el-input-number :min="0" v-model="item.tw_number"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="课时数" :prop="`b_teachingwork_list.${index}.tw_classhour`" :rules="{required: true, message: '请输入-教学任务-课时数', trigger: 'blur'}">
                                                <el-input-number :min="0" v-model="item.tw_classhour"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-button @click="remove_btn('teachingwork', item)" style="margin-top: 34px" type="danger">删除此项</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                            <el-button class="add_btn" type="primary" @click="add_btn('teachingwork')">添加</el-button>
                        </el-col>
                    </el-row>
                </el-tab-pane>


                <el-tab-pane label="技能等级认定辅导" name="技能等级认定辅导">
                    <el-row justify="center" style="margin-top: 50px">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between" v-for="(item, index) in basic_teaching_work.b_skill_list">
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="7" :xl="6">
                                            <el-form-item label="时间" :prop="`b_skill_list.${index}.s_time`" :rules="{required: true, message: '请选择-技能等级认定辅导-时间', trigger: 'blur'}">
                                                <el-date-picker v-model="item.s_time" style="width: 100%;" type="month" value-format="YYYY-MM" placeholder="请选择日期"></el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="7" :xl="6">
                                            <el-form-item label="指导班级及考试人数" :prop="`b_skill_list.${index}.s_classandnumber`" :rules="{
                                                type: 'array', required: true, len: 2, message: '请输入-技能等级认定辅导-指导班级及考试人数', fields: {
                                                    0: {required: true, type: 'string', message: '请输入-技能等级认定辅导-指导班级'},
                                                    1: {required: true, type: 'number', message: '请输入-技能等级认定辅导-考试人数'}
                                                }
                                            }">
                                                <el-col :span="16" style=" padding: 0">
                                                    <el-input placeholder="指导班级" v-model="item.s_classandnumber[0]"></el-input>
                                                </el-col>
                                                <el-col :span="8" style=" padding: 0">
                                                    <el-input-number @change="calculate_pass_rate(item)" :min="0" v-model="item.s_classandnumber[1]" style="width: 100%;" controls-position="right" placeholder="人数"></el-input-number>
                                                </el-col>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="7" :xl="6">
                                            <el-form-item label="工种" :prop="`b_skill_list.${index}.s_worktype`" :rules="{required: true, message: '请输入-技能等级认定辅导-工种', trigger: 'blur'}">
                                                <el-input v-model="item.s_worktype"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="7" :xl="6">
                                            <el-form-item label="通过人数" :prop="`b_skill_list.${index}.s_passnumber`" :rules="{required: true, message: '请输入-技能等级认定辅导-通过人数', trigger: 'blur'}">
                                                <el-input-number :min="0" :max="item.s_classandnumber[1]" @change="calculate_pass_rate(item)" v-model="item.s_passnumber"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="7" :xl="6">
                                            <el-form-item label="通过率">
                                                <el-input disabled v-model="item.s_passrate">
                                                    <template #append>%</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="7" :xl="6">
                                            <el-button @click="remove_btn('skill', item)" style="margin-top: 34px" type="danger">删除此项</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                            <el-button class="add_btn" type="primary" @click="add_btn('skill')">添加</el-button>
                        </el-col>
                    </el-row>
                </el-tab-pane>


                <el-tab-pane label="听课" name="听课">
                    <el-row justify="center" style="margin-top: 50px">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between">
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="年份" prop="b_year">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_year"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年听课次数" prop="b_listentime_first">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_listentime_first"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年听课次数" prop="b_listentime_second">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_listentime_second"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-tab-pane>


                <el-tab-pane label="教研活动" name="教研活动">
                    <el-row justify="center" style="margin-top: 50px">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between">
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="年份" prop="b_year">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_year"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年教研活动次数" prop="b_teachtime_first">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_teachtime_first"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年因私请假次数" prop="b_leavetime_first">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_leavetime_first"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年公出次数" prop="b_officialtime_first">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_officialtime_first"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5"></el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年教研活动次数" prop="b_teachtime_second">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_teachtime_second"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年因私请假次数" prop="b_leavetime_second">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_leavetime_second"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年公出次数" prop="b_officialtime_second">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_officialtime_second"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-tab-pane>


                <el-tab-pane label="工学交替及实习指导" name="工学交替及实习指导">
                    <el-row justify="center" style="margin-top: 50px">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between">
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="年份">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_year"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年专业">
                                                <el-input style="width: 70%" v-model="basic_teaching_work.b_major_first"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年指导班级">
                                                <el-input style="width: 70%" v-model="basic_teaching_work.b_class_first"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="上半年指导人数">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_number_first"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-row justify="space-between" :gutter="16">
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5"></el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年专业">
                                                <el-input style="width: 70%" v-model="basic_teaching_work.b_major_second"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年指导班级">
                                                <el-input style="width: 70%" v-model="basic_teaching_work.b_class_second"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
                                            <el-form-item label="下半年指导人数">
                                                <el-input-number :min="0" v-model="basic_teaching_work.b_number_second"></el-input-number>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                        </el-col>
                    </el-row>

                </el-tab-pane>
            </el-scrollbar>
        </el-tabs>
        <el-affix position="bottom" :offset="0">
            <el-button style="position: absolute;bottom: 50px;right: 10%" @click="submit" type="success" :loading="isLoading">提交 “基础教学工作”</el-button>
        </el-affix>
    </el-form>

</template>

<script>
import {ElLoading, ElMessage} from "element-plus";
import useStore from "../../store/store";

const store = useStore()
export default  {
    name: "basic_teaching_work",
    data(){
        return {
            // 表单数据
            basic_teaching_work: {
                user_id: store.user_id,
                b_teachingwork_list: [      // 教学任务
                    {
                        user_id: store.user_id,
                        tw_semester: '',    // 学期
                        tw_course: '',      // 课程
                        tw_class: '',       // 班级
                        tw_number: '',      // 人数
                        tw_classhour: ''    // 课时数
                    }
                ],
                b_skill_list: [                 // 技能等级认定辅导
                    // {
                    //     s_time: '',             // 时间
                    //     s_classandnumber: [],   // 指导班级及考试人数
                    //     s_worktype: '',         // 工种
                    //     s_passnumber: '',       // 通过人数
                    //     s_passrate: ''          // 通过率
                    // }
                ],
                b_year: '',                 // 听课，教研活动，工学交替中的学年
                b_listentime_first: '',     // 上学期听课次数
                b_listentime_second: '',    // 下学期听课次数
                b_teachtime_first: '',      // 上学期教研活动次数
                b_teachtime_second: '',     // 下学期教研活动次数
                b_leavetime_first: '',      // 上学期因私请假次数
                b_leavetime_second: '',     // 下学期因私请假次数
                b_officialtime_first: '',   // 上学期公出
                b_officialtime_second: '',  // 下学期公出
                b_major_first: '',          // 工学交替，上学期专业
                b_major_second: '',         // 工学交替，下学期专业
                b_class_first: '',          // 工学交替，上学期指导班级
                b_class_second: '',         // 工学交替，下学期指导班级
                b_number_first: '',         // 工学交替，上学期指导人数
                b_number_second: '',        // 工学交替，下学期指导人数
            },
            // 表单验证
            rules:{
                b_year: [
                    {required: true, message: '请输入-听课-年份', trigger: 'blur'}
                ],
                b_listentime_first: [
                    {required: true, message: '请输入-听课-上半年听课次数', trigger: 'blur'}
                ],
                b_listentime_second: [
                    {required: true, message: '请输入-听课-下半年听课次数', trigger: 'blur'}
                ],
                b_teachtime_first: [
                    {required: true, message: '请输入-教研活动-上半年教研活动次数', trigger: 'blur'}
                ],
                b_teachtime_second: [
                    {required: true, message: '请输入-教研活动-下半年教研活动次数', trigger: 'blur'}
                ],
                b_leavetime_first: [
                    {required: true, message: '请输入-教研活动-上半年因私请假次数', trigger: 'blur'}
                ],
                b_leavetime_second: [
                    {required: true, message: '请输入-教研活动-下半年因私请假次数', trigger: 'blur'}
                ],
                b_officialtime_first: [
                    {required: true, message: '请输入-教研活动-上半年公出', trigger: 'blur'}
                ],
                b_officialtime_second: [
                    {required: true, message: '请输入-教研活动-下半年公出', trigger: 'blur'}
                ]
            },
            // 学期选项
            semester_group: [
                {
                    value: '2021202202',
                    label: '2021-2022学年第二学期'
                },
                {
                    value: '2022202301',
                    label: '2022-2023学年第一学期'
                }
            ],
            isLoading: false,
            ActiveTab: '教学任务'
        }
    },
    computed: {

    },
    methods: {
        submit() {
            this.$refs.basic_teaching_work_form.validate((validate, message) => {
                if (!validate) {
                    this.ActiveTab = message[Object.keys(message)[0]][0].message.split('-')[1]
                    ElMessage.error(`表单验证未通过-> ${message[Object.keys(message)[0]][0].message}`)
                    return false
                }
                for (const bSkillListElement of this.basic_teaching_work.b_skill_list) {
                    bSkillListElement.s_classandnumber = bSkillListElement.s_classandnumber instanceof Array ? bSkillListElement.s_classandnumber.join(':') : bSkillListElement.s_classandnumber
                }
                this.push()
                for (const bSkillListElement of this.basic_teaching_work.b_skill_list) {
                    bSkillListElement.s_classandnumber = typeof bSkillListElement.s_classandnumber === "string" ? bSkillListElement.s_classandnumber.split(':') : bSkillListElement.s_classandnumber
                }
            })
        },
        push() {
            this.basic_teaching_work.type = "3002"
            this.isLoading = true
            this.basic_teaching_work.user_id = store.user_id
            this.$api.pushBasicTeachDat(this.basic_teaching_work).then(
                response => {
                    if (response.data.isSaved === true) {
                        ElMessage.success({
                            message: '基础教学工作提交成功！'
                        })
                    } else {
                        ElMessage.error({
                            message: '提交失败'
                        })
                    }
                    this.isLoading = false
                },
                error => {
                    console.log(error)
                    ElMessage.error({
                        message: error.message
                    })
                    this.isLoading = false
                }
            )
        },
        add_btn(type) {
            if (type === 'teachingwork') {
                this.basic_teaching_work.b_teachingwork_list.push(
                    {
                        user_id: store.user_id,
                        tw_semester: '',    // 学期
                        tw_course: '',      // 课程
                        tw_class: '',       // 班级
                        tw_number: '',      // 人数
                        tw_classhour: ''    // 课时数
                    }
                )
            } else if (type === 'skill') {
                this.basic_teaching_work.b_skill_list.push(
                    {
                        user_id: store.user_id,
                        s_time: '',             // 时间
                        s_classandnumber: [],   // 指导班级及考试人数
                        s_worktype: '',         // 工种
                        s_passnumber: '',       // 通过人数
                        s_passrate: ''          // 通过率
                    }
                )
            }
        },
        remove_btn(type, item) {
            if (type === 'teachingwork') {
                const index = this.basic_teaching_work.b_teachingwork_list.indexOf(item)
                index !== -1 ? this.basic_teaching_work.b_teachingwork_list.splice(index, 1) : false
            } else if (type === 'skill') {
                const index = this.basic_teaching_work.b_skill_list.indexOf(item)
                index !== -1 ? this.basic_teaching_work.b_skill_list.splice(index, 1) : false
            }
        },
        calculate_pass_rate(item) {
            const index =  this.basic_teaching_work.b_skill_list[this.basic_teaching_work.b_skill_list.indexOf(item)]
            if (index.s_classandnumber[1] && index.s_passnumber !== '') {
                index.s_passrate = ((index.s_passnumber / index.s_classandnumber[1]) * 100).toFixed(2)
            }
        }
    },
    mounted() {
        const loading = ElLoading.service({
            target: document.querySelector('.el-main'),
            text: '请稍候...'
        })
        this.$api.pullBasicTeachData(store.user_id).then(
            response => {
                for (const bSkillListElement of response.data.b_skill_list) {
                    bSkillListElement.s_classandnumber = bSkillListElement.s_classandnumber.split(':')
                }
                this.basic_teaching_work = response.data
                loading.close()
            },
            error => {
                console.log(error)
                ElMessage.error(`${error.message}---- 请求数据失败`)
                loading.close()
            }
        )
    }
}
</script>

<style scoped>
</style>